<template>
  <div>
    <h2>物流相关信息</h2>
    <div class="logistics-info-header">
      <div class="logistics-info-header-left">
        <div class="logistics-status blue" :style="{ color: asd }">
          {{ status }}
        </div>
        <div class="logistics-company">{{ renderData.logisticsCompany }}</div>
        <div class="logistics-no">{{ renderData.logisticsNo }}</div>
      </div>
    </div>
    <ul class="logistics-info-list">
      <li v-for="(item, index) in renderData.logisticsInfo" :key="index">
        <div class="logistics-info-list-time">{{ item.time }}</div>
        <div class="logistics-info-list-content">{{ item.content }}</div>
      </li>
    </ul>
    <button>查看物流详情</button>
  </div>
</template>

<script>
export default {
  name: 'LogistucsStatus',

  props: {
    renderData: Object,
  },

  computed: {
    status() {
      switch (this.renderData.logisticsStatus) {
        case 0:
          return '未发货'
        case 1:
          return '已发货'
        case 2:
          return '已签收'
        default:
          return '未签收'
      }
    },
    asd() {
      switch (this.renderData.logisticsStatus) {
        case 0:
          return 'red'
        case 1:
          return '#087'
        case 2:
          return '#007bff'
        default:
          return 'pink'
      }
    },
  },
}
</script>

<style scoped >
